<script lang="ts" setup>
import QRCode from 'qrcode';
import { onMounted, ref } from 'vue';
const props = defineProps(['text1', 'avatarSrc'])
// text生成二维码     类型：数字
// avatarSrc图片地址  类型：字符串
const qrCodeUrl = ref('')
const generUrl = async () => {
    qrCodeUrl.value = await QRCode.toDataURL(props.text1)
}

onMounted(() => {
    generUrl()
})
</script>

<template>

    <div v-if="qrCodeUrl" class="qr-container">
        <img :src="qrCodeUrl" alt="二维码" class="qr-code" style="width: 250px;height: 250px;"/>
        <img :src="avatarSrc" class="avatar" />
    </div>
</template>

<style scoped>
.qr-container {
    position: relative;
    display: inline-block;
    /* 或者其他布局方式 */
}

.qr-code {
    width: 150px;
    /* 根据需要调整 */
    height: auto;
    display: block;
}

.avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 居中图片 */
    width: 40px;
    /* 根据需要调整，但要确保不影响二维码的可读性 */
    height: auto;
    border-radius: 5px;
    /* 如果需要圆形头像 */
    z-index: 1;
    /* 确保头像在二维码上方 */
}
</style>
